<template>
	<view class="h_100 bg-white p-4">
		<view class=" h4">为了保证您本人操作，请先完成验证</view>
		<u--form :model="userName" :rules="rules" ref="userName">
			<u-form-item prop="oldName" ref="oldName">
				<view class="wsd_input c_9 h4 mt-4 flex justify-between">
					<u--input class="wsd_input common" placeholder="请输入旧帐号" maxlength="15" border="none" v-model="userName.oldName" clearable></u--input>
					<view class="right_text h4" @click="verifyOldNum">
						<text>|</text>
						验证旧帐号
					</view>
				</view>
			</u-form-item>
			<u-form-item prop="newName" style="width: 100%;">
				<view class="wsd_input c_9 h4 mt-3">
					<u--input class="wsd_input common" maxlength="15" placeholder="请输入新账号" border="none" v-model="userName.newName" clearable></u--input>
				</view>
			</u-form-item>
		</u--form>
		<button class="next_btn common h4 text-white my-5" @click="userNameVerify">下一步</button>
		<u-popup :show="popupShow" mode="center">
			<view class="p-3 popup_img">
				<image v-if="isSuccess" src="/static/img2/my/success.png" mode=""></image>
				<image v-else src="/static/img2/my/error.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { userAccount, userVerification } from '@/api/my/safety.js';
export default {
	data() {
		return {
			userName: {
				oldName: '',
				newName: ''
			},
			correctOld: false, //旧帐号是否正确
			rules: {
				oldName: [
					{
						type: 'string',
						required: true,
						message: '请填写旧帐号',
						trigger: ['blur', 'change']
					}
				],
				newName: [
					{
						type: 'string',
						required: true,
						message: '请填写新帐号',
						trigger: ['blur', 'change']
					},
					{
						type: 'string',
						message: '账号应为字母，数字组合，5-15位',
						pattern: /^[0-9A-Za-z]{5,15}$/,
						trigger: ['blur']
					}
				]
			},
			popupShow: false,
			isSuccess: true
		};
	},
	onReady() {
		this.$refs.userName.setRules(this.rules);
	},
	methods: {
		// 旧帐号验证
		verifyOldNum() {
			this.$refs.userName
				.validateField('oldName')
				.then(res => {
					let msg = {
						token: uni.getStorageSync('userInfo').token || '',
						username_old: this.userName.oldName
					};
					userAccount(msg)
						.then(res => {
							uni.$u.toast(res.msg);
							if (res.code == 0) {
								this.correctOld = true;
							} else {
								this.correctOld = false;
							}
						})
						.catch(err => {
							console.log('旧帐号验证失败', err);
						});
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 账号修改
		async userNameVerify() {
			let that = this;
			that.$refs.userName
				.validate()
				.then(async e => {
					await that.verifyOldNum();
					setTimeout(() => {
						if (!that.correctOld) return;
						let msg = {
							token: uni.getStorageSync('userInfo').token || '',
							username_old: that.userName.oldName,
							username: that.userName.newName
						};
						userVerification(msg)
							.then(res => {
								this.popupShow = true;
								if (res.code == 0) {
									this.isSuccess = true;
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 1000);
								} else {
									this.isSuccess = false;
									uni.$u.toast(res.msg);
								}
								setTimeout(() => {
									this.popupShow = false;
								}, 1000);
							})
							.catch(err => {
								console.log('修改账号失败', err);
							});
					}, 600);
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.common {
	width: 100%;
	height: 98rpx;
	border-radius: 49rpx;
	line-height: 98rpx;
}
.wsd_input {
	width: 100%;
	background: #f5f5f5;
	padding: 0 50rpx;
	border-radius: 49rpx;
}
.next_btn {
	background: #cd1a2d;
}

::v-deep .u-input__content {
	height: 98rpx;
	border-radius: 49rpx;
}
.right_text {
	line-height: 98rpx;
	color: #4e6ef3;
	text {
		color: #999999;
		margin: 0 20rpx 0 10rpx;
	}
}
.popup_img {
	width: 630rpx;
	height: 366rpx;
	background-color: $color2;
	position: relative;

	image {
		width: 90rpx;
		height: 144rpx;
		border-radius: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
}
::v-deep .u-safe-bottom {
	padding: 0;
}
</style>
